<template>
  <section id="faq" class="observe">
    <div class="container">
      <h2>常见问题</h2>
      <p class="subtitle">解答您的疑惑</p>

      <div class="faq-grid">
        <!-- FAQ 项目 1 -->
        <div class="faq-item" :class="{ active: activeItem === 0 }" @click="toggleItem(0)">
          <div class="faq-question">
            <h3>商用是否需要额外授权？</h3>
            <div class="faq-icon">{{ activeItem === 0 ? "−" : "+" }}</div>
          </div>
          <div class="faq-answer" v-show="activeItem === 0">
            <p>
              不需要。您购买的会员方案已包含商业使用授权，可以直接将生成的视频用于商业目的，包括品牌宣传、产品营销、社交媒体等场景，无需额外付费。但请注意，某些第三方素材可能有其自身的授权限制。
            </p>
          </div>
        </div>

        <!-- FAQ 项目 2 -->
        <div class="faq-item" :class="{ active: activeItem === 1 }" @click="toggleItem(1)">
          <div class="faq-question">
            <h3>支持哪些平台比例和分发？</h3>
            <div class="faq-icon">{{ activeItem === 1 ? "−" : "+" }}</div>
          </div>
          <div class="faq-answer" v-show="activeItem === 1">
            <p>
              我们支持主流社交媒体平台的所有比例，包括竖屏 9:16（抖音、快手、Instagram
              Stories）、横屏 16:9（YouTube、B站）、方形
              1:1（微信视频号、小红书）等。专业版和企业版用户可以一键适配多种比例并同时导出，支持直接分发到各大平台。
            </p>
          </div>
        </div>

        <!-- FAQ 项目 3 -->
        <div class="faq-item" :class="{ active: activeItem === 2 }" @click="toggleItem(2)">
          <div class="faq-question">
            <h3>团队协作如何使用？</h3>
            <div class="faq-icon">{{ activeItem === 2 ? "−" : "+" }}</div>
          </div>
          <div class="faq-answer" v-show="activeItem === 2">
            <p>
              企业版提供完整的团队协作功能，包括项目共享、角色权限管理、审核流程、评论反馈等。管理员可以邀请团队成员加入工作区，分配不同权限，共同编辑项目。同时支持版本历史记录，可以随时回溯或恢复之前的版本。
            </p>
          </div>
        </div>

        <!-- FAQ 项目 4 -->
        <div class="faq-item" :class="{ active: activeItem === 3 }" @click="toggleItem(3)">
          <div class="faq-question">
            <h3>如何处理版权素材问题？</h3>
            <div class="faq-icon">{{ activeItem === 3 ? "−" : "+" }}</div>
          </div>
          <div class="faq-answer" v-show="activeItem === 3">
            <p>
              我们内置了海量版权素材库，所有会员都可以免费使用这些素材。专业版和企业版用户还可以使用AI生成素材功能，创建独特的图像和动画。您也可以上传自己的素材，但需确保拥有相应的使用权。对于音乐，我们提供了免版权音乐库，也支持自定义上传。
            </p>
          </div>
        </div>

        <!-- FAQ 项目 5 -->
        <div class="faq-item" :class="{ active: activeItem === 4 }" @click="toggleItem(4)">
          <div class="faq-question">
            <h3>支持哪些语言的字幕和配音？</h3>
            <div class="faq-icon">{{ activeItem === 4 ? "−" : "+" }}</div>
          </div>
          <div class="faq-answer" v-show="activeItem === 4">
            <p>
              我们支持全球超过 40
              种语言的字幕和配音，包括中文（普通话、粤语）、英语（美式、英式）、日语、韩语、法语、德语、西班牙语等主流语言。专业版和企业版用户可以使用高级AI配音功能，提供更自然的语音效果和情感表达，甚至可以克隆您自己的声音。
            </p>
          </div>
        </div>

        <!-- FAQ 项目 6 -->
        <div class="faq-item" :class="{ active: activeItem === 5 }" @click="toggleItem(5)">
          <div class="faq-question">
            <h3>是否提供技术支持和培训？</h3>
            <div class="faq-icon">{{ activeItem === 5 ? "−" : "+" }}</div>
          </div>
          <div class="faq-answer" v-show="activeItem === 5">
            <p>
              是的，我们为所有用户提供基础的邮件支持。专业版用户享有优先响应和在线客服支持。企业版用户将获得专属客户经理、定制化培训和技术支持方案。此外，我们的知识库和视频教程覆盖了从入门到高级的各种使用场景，帮助您快速掌握平台的全部功能。
            </p>
          </div>
        </div>
      </div>

      <div class="more-questions">
        <p>还有其他问题？</p>
        <button class="btn-outline">联系客服</button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from "vue";

// FAQ 状态
const activeItem = ref(null);

// 切换 FAQ 项目
const toggleItem = (index) => {
  if (activeItem.value === index) {
    activeItem.value = null;
  } else {
    activeItem.value = index;
  }
};

// 生命周期钩子
onMounted(() => {
  // 设置观察器，当元素进入视口时添加reveal类
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("reveal");
        }
      });
    },
    { threshold: 0.12 }
  );

  document.querySelectorAll(".observe").forEach((el) => {
    observer.observe(el);
  });
});
</script>

<style scoped>
/* FAQ区域样式 */
#faq {
  padding: 100px 0;
  background: #f8faff;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

h2 {
  text-align: center;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #1e293b;
}

.subtitle {
  text-align: center;
  font-size: 18px;
  color: #64748b;
  margin-bottom: 60px;
}

.faq-grid {
  max-width: 800px;
  margin: 0 auto 60px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

#faq.reveal .faq-grid {
  opacity: 1;
  transform: translateY(0);
}

.faq-item {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 102, 255, 0.08);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 102, 255, 0.05);
}

.faq-item:hover {
  box-shadow: 0 8px 30px rgba(0, 102, 255, 0.12);
  transform: translateY(-2px);
}

.faq-item.active {
  box-shadow: 0 8px 30px rgba(0, 102, 255, 0.12);
  border: 1px solid rgba(0, 102, 255, 0.2);
}

.faq-question {
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-question h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  color: #1e293b;
}

.faq-icon {
  font-size: 24px;
  font-weight: 600;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #0066ff;
  background: rgba(0, 102, 255, 0.08);
  border-radius: 50%;
}

.faq-answer {
  padding: 0 28px 24px;
  font-size: 16px;
  line-height: 1.7;
  color: #64748b;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.more-questions {
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
  transition-delay: 0.3s;
}

#faq.reveal .more-questions {
  opacity: 1;
  transform: translateY(0);
}

.more-questions p {
  font-size: 18px;
  margin-bottom: 16px;
  color: #1e293b;
}

.btn-outline {
  background: transparent;
  border: 2px solid #0066ff;
  color: #0066ff;
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: rgba(0, 102, 255, 0.08);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 102, 255, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  #faq {
    padding: 80px 0;
  }
  
  h2 {
    font-size: 32px;
  }

  .subtitle {
    font-size: 16px;
    margin-bottom: 40px;
  }

  .faq-question h3 {
    font-size: 16px;
  }

  .faq-answer {
    font-size: 15px;
  }

  .more-questions p {
    font-size: 16px;
  }
  
  .container {
    padding: 0 16px;
  }
}
</style>
